<!-- ForgotPassword.vue -->
<template>
  <div class="forgot-container">
    <!-- 动态粒子背景 -->
    <vue-particles
      class="particles"
      color="#FFFFFF"
      :particleOpacity="0.8"
      :particlesNumber="100"
      shapeType="circle"
      :particleSize="5"
      linesColor="#FFFFFF"
      :linesWidth="2"
      :lineLinked="true"
      :lineOpacity="0.6"
      :linesDistance="120"
      :moveSpeed="3"
      :hoverEffect="true"
      hoverMode="bubble"
      :clickEffect="true"
      clickMode="repulse"
    ></vue-particles>

    <!-- 背景光效 -->
    <div class="light-effect light-1"></div>
    <div class="light-effect light-2"></div>

    <div class="forgot-box" :class="{'box-float': isHovering}">
      <div class="forgot-header">
        <img 
          src="../assets/images/logo.png" 
          alt="Logo" 
          class="logo animate__animated animate__rubberBand" 
          :style="{'animation-delay': '0.5s'}"
        >
        <h2 class="animate__animated animate__fadeInDown" :style="{'animation-delay': '0.7s'}">
          找回密码
          <span class="title-highlight"></span>
        </h2>
        <p class="subtitle animate__animated animate__fadeIn" :style="{'animation-delay': '0.9s'}">
          重置您的账户密码
        </p>
      </div>

      <el-steps :active="activeStep" finish-status="success" class="steps animate__animated animate__fadeInUp" :style="{'animation-delay': '1.1s'}">
        <el-step title="验证身份"></el-step>
        <el-step title="重置密码"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>

      <div class="step-content animate__animated animate__fadeInUp" :style="{'animation-delay': '1.1s'}">
        <!-- 第一步：验证身份 -->
        <div v-if="activeStep === 0" class="step-1">
          <el-form
            ref="step1FormRef"
            :model="forgotForm"
            :rules="forgotRules"
            class="forgot-form"
            @keyup.enter.native="handleStep1"
          >
            <el-form-item prop="email">
              <el-input
                v-model="forgotForm.email"
                placeholder="请输入注册邮箱"
                prefix-icon="Message"
                @focus="inputFocus('email')"
                @blur="inputBlur"
                class="input-field"
              />
            </el-form-item>

            <el-form-item prop="verificationCode">
              <div class="code-input">
                <el-input
                  v-model="forgotForm.verificationCode"
                  placeholder="请输入验证码"
                  prefix-icon="Key"
                  @focus="inputFocus('verificationCode')"
                  @blur="inputBlur"
                  class="input-field"
                />
                <el-button 
                  type="primary" 
                  class="code-btn" 
                  :disabled="codeDisabled"
                  @click="sendVerificationCode"
                >
                  {{ codeButtonText }}
                </el-button>
              </div>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                class="action-btn"
                :loading="loading"
                @click="handleStep1"
              >
                下一步
              </el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 第二步：重置密码 -->
        <div v-else-if="activeStep === 1" class="step-2">
          <el-form
            ref="step2FormRef"
            :model="forgotForm"
            :rules="forgotRules"
            class="forgot-form"
            @keyup.enter.native="handleStep2"
          >
            <el-form-item prop="newPassword">
              <el-input
                v-model="forgotForm.newPassword"
                type="password"
                placeholder="请输入新密码"
                prefix-icon="Lock"
                show-password
                @focus="inputFocus('newPassword')"
                @blur="inputBlur"
                class="input-field"
              />
            </el-form-item>

            <el-form-item prop="confirmPassword">
              <el-input
                v-model="forgotForm.confirmPassword"
                type="password"
                placeholder="请确认新密码"
                prefix-icon="Lock"
                show-password
                @focus="inputFocus('confirmPassword')"
                @blur="inputBlur"
                class="input-field"
              />
            </el-form-item>

            <el-form-item>
              <div class="action-buttons">
                <el-button class="prev-btn" @click="prevStep">上一步</el-button>
                <el-button
                  type="primary"
                  class="action-btn"
                  :loading="loading"
                  @click="handleStep2"
                >
                  提交
                </el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>

        <!-- 第三步：完成 -->
        <div v-else class="step-3">
          <div class="success-icon">
            <i class="el-icon-circle-check"></i>
          </div>
          <h3>密码重置成功！</h3>
          <p>您可以使用新密码登录系统</p>
          <el-button
            type="primary"
            class="login-btn"
            @click="goToLogin"
          >
            返回登录
          </el-button>
        </div>
      </div>
    </div>

    <!-- 浮动装饰元素 -->
    <div class="floating-elements">
      <div 
        v-for="(shape, index) in floatingShapes" 
        :key="index"
        :class="['shape', `shape-${index}`, shape.type]"
        :style="shape.style"
      ></div>
    </div>
  </div>
</template>

<script>
import 'animate.css';
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';

export default {
  name: 'ForgotPassword',
  setup() {
    const router = useRouter();
    const isHovering = ref(false);
    const activeStep = ref(0); // 初始化为第一步
    const loading = ref(false);
    const codeDisabled = ref(false);
    const codeButtonText = ref('获取验证码');
    let countdown = 60;
    const step1FormRef = ref(null);
    const step2FormRef = ref(null);

    const floatingShapes = [
      { type: 'circle', style: { top: '15%', left: '5%', width: '120px', height: '120px', animationDelay: '0s' } },
      { type: 'circle', style: { top: '70%', left: '80%', width: '180px', height: '180px', animationDelay: '2s' } },
      { type: 'triangle', style: { top: '30%', left: '85%', borderWidth: '60px', animationDelay: '1s' } }
    ];

    const forgotForm = reactive({
      email: '',
      verificationCode: '',
      newPassword: '',
      confirmPassword: ''
    });

    const validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (value.length < 6) {
        callback(new Error('密码长度不能少于6位'));
      } else {
        callback();
      }
    };
    
    const validateConfirmPassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== forgotForm.newPassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };

    const forgotRules = {
      email: [
        { required: true, message: '请输入邮箱地址', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
      ],
      verificationCode: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
        { len: 6, message: '验证码长度为6位', trigger: 'blur' }
      ],
      newPassword: [
        { required: true, validator: validatePassword, trigger: 'blur' }
      ],
      confirmPassword: [
        { required: true, validator: validateConfirmPassword, trigger: 'blur' }
      ]
    };

    // 输入框聚焦效果
    const inputFocus = (field) => {
      console.log(`${field} 输入框获得焦点`);
    };

    const inputBlur = () => {
      console.log('输入框失去焦点');
    };

    const sendVerificationCode = () => {
      if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(forgotForm.email)) {
        ElMessage.error('请输入有效的邮箱地址');
        return;
      }
      
      codeDisabled.value = true;
      const timer = setInterval(() => {
        countdown--;
        codeButtonText.value = `${countdown}秒后重新获取`;
        if (countdown <= 0) {
          clearInterval(timer);
          codeDisabled.value = false;
          codeButtonText.value = '获取验证码';
          countdown = 60;
        }
      }, 1000);
      
      // 模拟发送验证码
      ElMessage.success('验证码已发送至您的邮箱');
    };

    const handleStep1 = () => {
      // 修改这里
      step1FormRef.value?.validate(valid => {
        if (valid) {
          // 验证码验证逻辑
          if (forgotForm.verificationCode !== '123456') {
            ElMessage.error('验证码错误，请输入正确的验证码');
            return;
          }
          activeStep.value = 1;
        }
      });
    };

    const handleStep2 = () => {
      // 修改这里
      step2FormRef.value?.validate(valid => {
        if (valid) {
          loading.value = true;
          setTimeout(() => {
            loading.value = false;
            activeStep.value = 2;
            ElMessage.success('密码重置成功');
          }, 1500);
        }
      });
    };

    const prevStep = () => {
      if (activeStep.value > 0) {
        activeStep.value--;
      }
    };

    const goToLogin = () => {
      router.push('/login');
    };

    return {
      isHovering,
      activeStep,
      loading,
      codeDisabled,
      codeButtonText,
      forgotForm,
      forgotRules,
      floatingShapes,
      step1FormRef,  // 修改这里
      step2FormRef, 
      inputFocus,
      inputBlur,
      sendVerificationCode,
      handleStep1,
      handleStep2,
      prevStep,
      goToLogin
    };
  }
}
</script>

<style scoped>
.forgot-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(-45deg, #3f51b1, #5a55ae, #7b5fac, #8f6aae, #a86aa4, #cc6b8e, #f18271, #f3a469, #f7c978);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  overflow: hidden;
  font-family: 'Noto Sans SC', sans-serif;
}

.forgot-box {
  position: relative;
  width: 500px;
  padding: 40px 50px;
  background-color: rgba(255, 255, 255, 0.93);
  border-radius: 20px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  z-index: 2;
  backdrop-filter: blur(8px);
  transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.forgot-header {
  text-align: center;
  margin-bottom: 30px;
}

.forgot-header .logo {
  width: 80px;
  height: 80px;
  margin-bottom: 15px;
  transition: all 0.5s ease;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.1));
}

.forgot-header h2 {
  color: #333;
  font-size: 26px;
  font-weight: 700;
  margin: 10px 0 5px;
  letter-spacing: 1px;
  position: relative;
  display: inline-block;
}

.title-highlight {
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  z-index: -1;
  border-radius: 3px;
  opacity: 0.5;
  animation: highlightPulse 3s infinite;
}

.steps {
  margin-bottom: 30px;
}

.step-content {
  min-height: 200px;
}

.code-input {
  display: flex;
  gap: 10px;
}

.code-btn {
  width: 140px;
  height: 48px;
  font-size: 14px;
  border-radius: 12px;
  background: linear-gradient(90deg, #a18cd1, #fbc2eb);
  border: none;
  transition: all 0.3s ease;
}

.code-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(161, 140, 209, 0.4);
}

.code-btn:disabled {
  background: #cccccc;
  transform: none;
  box-shadow: none;
}

.action-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.action-btn {
  width: 48%;
  height: 48px;
  font-size: 16px;
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  border: none;
  border-radius: 12px;
  color: white;
  transition: all 0.3s ease;
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 242, 254, 0.4);
}

.prev-btn {
  width: 48%;
  height: 48px;
  font-size: 16px;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.prev-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.step-3 {
  text-align: center;
  padding: 20px 0;
}

.success-icon {
  font-size: 80px;
  color: #67c23a;
  margin-bottom: 20px;
  animation: bounceIn 0.8s;
}

.step-3 h3 {
  font-size: 22px;
  color: #333;
  margin-bottom: 10px;
}

.step-3 p {
  color: #666;
  margin-bottom: 30px;
}

.login-btn {
  width: 100%;
  height: 48px;
  font-size: 16px;
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  border: none;
  border-radius: 12px;
  color: white;
  transition: all 0.3s ease;
}

.login-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 242, 254, 0.4);
}
.login-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #00f2fe, #4facfe);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.login-btn:hover::before {
  opacity: 1;
}

.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.login-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  font-size: 15px;
}

.remember-me {
  transition: all 0.3s ease;
}

.remember-me:hover {
  transform: scale(1.05);
}

.links {
  display: flex;
  gap: 20px;
}

.link-item {
  transition: all 0.3s ease;
  position: relative;
  padding: 5px 0;
}

.link-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #4facfe, #00f2fe);
  transition: width 0.3s ease;
}

.link-item:hover::after {
  width: 100%;
}

/* 浮动装饰元素 */
.floating-elements {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 0;
}

.shape {
  position: absolute;
  opacity: 0.15;
  animation: float 15s infinite ease-in-out;
}

.circle {
  border-radius: 50%;
  background: linear-gradient(45deg, #4facfe, #00f2fe);
}

.triangle {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 120px solid #ff5e62;
}

.square {
  background: #a18cd1;
  transform: rotate(45deg);
}

.hexagon {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  background: #fbc2eb;
}

@keyframes float {
  0%, 100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(20px, -30px) rotate(10deg);
  }
  50% {
    transform: translate(-20px, 20px) rotate(-10deg);
  }
  75% {
    transform: translate(30px, 10px) rotate(5deg);
  }
}

/* 输入框样式 */
:deep(.el-input__wrapper) {
  transition: all 0.5s ease;
  box-shadow: 0 0 0 1px #dcdfe6 inset;
  border-radius: 12px;
  padding: 0 15px;
  height: 48px;
  background-color: rgba(255, 255, 255, 0.8);
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 2px #4facfe inset !important;
  transform: translateY(-3px);
  background-color: white;
}

:deep(.el-input__inner) {
  font-size: 15px;
}

/* 消息提示样式 */
:deep(.success-message) {
  background: linear-gradient(90deg, #56ab2f, #a8e063);
  color: white;
  font-size: 16px;
  padding: 18px 25px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(86, 171, 47, 0.4);
  border: none;
}

:deep(.error-message) {
  background: linear-gradient(90deg, #ff416c, #ff4b2b);
  color: white;
  font-size: 16px;
  padding: 18px 25px;
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(255, 65, 108, 0.4);
  border: none;
}

/* 登录成功特效 */
.success-effect {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  opacity: 0;
  animation: confettiFall 3s ease-in forwards;
}

@keyframes confettiFall {
  0% {
    transform: translateY(-100px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-box {
    width: 90%;
    padding: 30px;
  }
  
  .login-header .logo {
    width: 80px;
    height: 80px;
  }
  
  .login-header h2 {
    font-size: 24px;
  }
}
/* 其他样式与Login.vue中的相同部分保持一致 */
/* 包括particles、light-effect、floating-elements等样式 */
</style>